// 封装中间件函数的插件
export const directiveObj = {
  install(Vue) {
    Vue.directive('fofo', {
      // el代表指令所在标签
      // 指令所在标签，被插入到真实DOM中才触发。如果标签用display:none隐藏再触发，是不会触发inserted的，用update
      inserted(el) {
        // 指定所在van-search组件
        // 组件根标签是div，input在内部
        // 以上都是原生标签对象
        // 搜索页面  el是div
        // 文章评论 el是textarea
        // 以后el还可能是input呢
        // 知识点：原生的DOM.nodeName 拿到标签 名字(注意：都是大写的字符串)
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本身不是输入框，尝试往里获取一下
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          if (theInput) theInput.focus()
          if (theTextArea) theTextArea.focus()
        }
      },
      update(el) {
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el本身不是输入框，尝试往里获取一下
          const theInput = el.querySelector('input')
          const theTextArea = el.querySelector('textarea')
          if (theInput) theInput.focus()
          if (theTextArea) theTextArea.focus()
        }
      }
    })
  }
}
